import React from 'react';
import { Layout, Breadcrumb, Card, Table, Button, DatePicker, Select } from 'antd';
import { Content } from 'antd/es/layout/layout';
// 修改图标导入，使用正确的图标名称
import { BarChartOutlined, PieChartOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;
const { Option } = Select;

const Reports = () => {
  const reportData = [
    { id: 1, date: '2023-05-01', totalSales: 2400, totalTransactions: 15, topProduct: '阿莫西林胶囊' },
    { id: 2, date: '2023-05-02', totalSales: 1960, totalTransactions: 12, topProduct: '布洛芬片' },
    { id: 3, date: '2023-05-03', totalSales: 3400, totalTransactions: 20, topProduct: '奥美拉唑' },
    { id: 4, date: '2023-05-04', totalSales: 1500, totalTransactions: 8, topProduct: '维生素C片' },
  ];

  const columns = [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '总销售额(元)',
      dataIndex: 'totalSales',
      key: 'totalSales',
    },
    {
      title: '交易笔数',
      dataIndex: 'totalTransactions',
      key: 'totalTransactions',
    },
    {
      title: '热销产品',
      dataIndex: 'topProduct',
      key: 'topProduct',
    },
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout className="site-layout">
        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>报告</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            <Card 
              title="销售报告" 
              bordered={false}
              extra={
                <div style={{ display: 'flex', gap: '10px' }}>
                  <RangePicker defaultValue={[dayjs().subtract(7, 'days'), dayjs()]} />
                  <Select defaultValue="daily" style={{ width: 120 }}>
                    <Option value="daily">日报</Option>
                    <Option value="weekly">周报</Option>
                    <Option value="monthly">月报</Option>
                  </Select>
                  <Button type="primary">导出报告</Button>
                </div>
              }
            >
              <div style={{ marginBottom: 20, display: 'flex', justifyContent: 'center' }}>
                <div style={{ marginRight: 40 }}>
                  // 修改图标使用，使用正确的图标组件名
                  <BarChartOutlined style={{ fontSize: '48px', color: '#1890ff' }} />
                  <div>销售趋势图</div>
                </div>
                <div>
                  // 修改图标使用，使用正确的图标组件名
                  <PieChartOutlined style={{ fontSize: '48px', color: '#52c41a' }} />
                  <div>产品占比图</div>
                </div>
              </div>
              <Table dataSource={reportData} columns={columns} pagination={{ pageSize: 5 }} />
            </Card>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Reports;